import React, { Component } from 'react'
import { Swiper, Button, Popup, Stepper, Toast } from 'antd-mobile'
import { LeftOutline } from "antd-mobile-icons";
import { goodsDetail, addCart } from "@api";
import { getToken } from '@utils/index.js'
import { store } from '../../store/index'
import './index.scss'

export default class Detail extends Component {
  state = {
    img: [],
    mainimg: '',
    name: '',
    characteristic: '',
    content: '',
    visible1: false,
    num: 1,
    allunm: 0
  }
  render() {
    return (
      <div className='sc_detail'>
        <div className="item-head">
          <div className="goback" onClick={() => this.props.history.go(-1)}>
            <LeftOutline />
          </div>
          <div className="title">详情页</div>
          <div className="gopage" ></div>
        </div>
        <div className='sc_dc'>
          <div className='rolling'>
            <Swiper allowTouchMove={true} loop indicator={(total, current) => (
              <div className='pointnum'>
                {`${current + 1} / ${total}`}
              </div>
            )}>
              {
                !this.state.img ?
                  ''
                  :
                  this.state.img.map((item) => (
                    <Swiper.Item key={item.id}>
                      <img src={item.pic} alt={item.id} style={{ width: '100%', height: '7.1rem' }} />
                    </Swiper.Item>
                  ))
              }
            </Swiper>
          </div>
          <div className='msg'>
            <div className='title'><strong>{this.state.name}</strong> </div>
            <div className='characteristic'>{this.state.characteristic}</div>
            <div className='content' dangerouslySetInnerHTML={{ __html: this.state.content }}></div>
          </div>

        </div>
        <div className='pops'>
          <Button color='danger' onClick={() => this.setState({ visible1: !this.state.visible1 })}>加入购物车</Button>
          <Popup visible={this.state.visible1} onMaskClick={() => this.setState({ visible1: !this.state.visible1 })} bodyStyle={{ minHeight: '40vh' }} >
            <img src={this.state.mainimg} alt='' />
            <Stepper defaultValue={1} onChange={value => this.setState({ num: value })} />
            <Button color='danger' onClick={() => this.addCart()}>加入购物车</Button>
          </Popup>
        </div>
      </div>
    )
  }
  componentDidMount() {
    this.goodsDetail()
    let alltabnum = Number(JSON.parse(localStorage.getItem('persist:root')).preState)
    store.dispatch({ type: 'allnumber', data: alltabnum })
  }
  goodsDetail = () => {
    goodsDetail({
      id: this.props.match.params.id
    }).then((res) => {
      if (res.data.code === 0) {
        console.log(res);
        this.setState({
          mainimg: res.data.data.pics2[0],
          img: res.data.data.pics,
          name: res.data.data.basicInfo.name,
          characteristic: res.data.data.basicInfo.characteristic,
          content: res.data.data.content
        })
      }
    })
  }
  addCart = () => {
    addCart({
      number: this.state.num,
      goodsId: this.props.match.params.id,
      token: getToken()
    }).then((res) => {
      this.setState({ visible1: !this.state.visible1 })
      if (res.data.code === 0) {
        Toast.show({
          icon: 'success',
          content: '加购成功',
        })
        this.setState(() => {
          store.dispatch({ type: 'allnumber', data: res.data.data.number })
          return {
            allunm: res.data.data.number,
          }
        })
      }
    })
  }
}
